<template>
  <view class="page-pwd">
    <view class="header">
      <view class="title">{{ $t('mine.密码') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <uni-forms ref="form" :value="user" labelWidth="80px" class="form">
      <uni-forms-item name="oldpassword" :label="$t('mine.旧密码')">
        <uni-easyinput type="password" v-model="user.oldpassword" :placeholder="$t('mine.请输入旧登录密码')" />
      </uni-forms-item>
      <uni-forms-item name="password" :label="$t('mine.新密码')">
        <uni-easyinput type="password" v-model="user.password" :placeholder="$t('mine.请输入新登录密码')" />
      </uni-forms-item>
      <template>
        <uni-forms-item name="confirmpassword" :label="$t('mine.确认密码')">
          <uni-easyinput type="password" v-model="user.confirmpassword" :placeholder="$t('mine.请确认新登录密码')" />
        </uni-forms-item>
      </template>
      <button type="primary" @click="submit" class="btn">{{ $t('mine.提交') }}</button>
    </uni-forms>
  </view>
</template>

<script>
  import { updateUserPwd } from '@/api/system/user'

  export default {
    data() {
      return {
        user: {
          oldpassword: undefined,
          password: undefined,
          confirmpassword: undefined
        },
        rules: {
          oldpassword: {
            rules: [
              {
                required: true,
                errorMessage: this.$t('mine.旧密码不能为空')
              }
            ]
          },
          password: {
            rules: [
              {
                required: true,
                errorMessage: this.$t('mine.新密码不能为空')
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: this.$t('mine.长度在 6 到 20 个字符')
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$set(this.rules, 'confirmpassword', {
        rules: [
          {
            required: true,
            errorMessage: this.$t('mine.确认密码不能为空')
          },
          {
            validateFunction: (rule, value, data) => data.password === value,
            errorMessage: this.$t('mine.两次输入的密码不一致')
          }
        ]
      })
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      // 返回
      handleBack() {
        // this.$tab.navigateBack()
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      //提交
      submit() {
        this.$refs.form.validate().then((res) => {
          this.$modal.loading('loading', 'loading')
          updateUserPwd(this.user)
            .then((response) => {
              this.$modal.closeLoading()
              this.$modal.msgSuccess(this.$t('mine.修改成功'))
              this.$store
                .dispatch('LogOut')
                .then(() => {})
                .finally(() => {
                  this.$tab.reLaunch('/pages/index')
                })
            })
            .catch((err) => {
              this.$modal.closeLoading()
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-pwd {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .form {
      margin: 200rpx 50rpx 0;
    }
    .btn {
      background: #31b2b5;
      width: 70vw;
      height: 40px;
      border-radius: 20px;
      font-size: 16px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      margin: 100rpx auto 0;
    }
  }
  ::v-deep.uni-easyinput {
    .uni-easyinput__content-input {
      padding: 0 10px;
    }
  }
</style>
